<template>
    <!-- <a-modal centered v-model="visible" :footer="null" :closable="false" width="520px"> -->
    <form @submit="() => { return false; }">
        <!-- <div class="n-dialog-mask"></div> -->
        <div class="n-dialog-container n-login-modal">
            <a class="close-dialog-btn" @click="$emit('close')"></a>
            <template v-if="loginType == 0 || loginType == 1">
                <img loading="lazy" class="n-login-logo" :src="logoPic"
                    alt="" />
                <!-- <a class="sys-logo">
                </a> -->
                <div class="join-tit">加入全球领先的游戏UI社区</div>
                <div class="n-login-type">
                    <span :class="{ 'active': loginType == 0 }" @click="loginType = 0">短信登录</span>
                    <span :class="{ 'active': loginType == 1 }" @click="loginType = 1">密码登录</span>
                </div>
                <div class="n-login-form">
                    <div class="field-item">
                        <input type="text" v-model="loginParam.phone" :placeholder="loginType==0?'请输入手机号码':'请输入手机号码/邮箱/用户名'" />
                    </div>
                    <div class="field-item" v-if="loginType == 0">
                        <input type="text" v-model="loginParam.pwd" placeholder="请输入验证码" /><a @click="getCode"
                            class="get-code-btn">{{authText}}</a>
                    </div>
                    <div class="field-item " v-if="loginType == 1">
                        <input :type="isViewPwd?'text':'password'" v-model="loginParam.pwd" placeholder="请输入密码" />
                        <a class="view-pwd" :class="{'active':!isViewPwd}" @click="isViewPwd=!isViewPwd"></a>
                    </div>
                    <div class="field-forget-pwd-tip" v-if="loginType == 1">
                        <a @click="loginType = 2">忘记密码?</a>
                    </div>
                    <div class="btn-box field-login-btn" @click="handleLogin">
                        <a>登录{{ loginType==0?'/注册':'' }}</a>
                    </div>
                    <div class="field-login-split">或</div>
                    <div class="btn-box field-other-wx-btn">
                        <a @click="touchThirdLogin(0)">使用微信登录</a>
                    </div>
                    <div class="btn-box field-other-qq-btn">
                        <a @click="touchThirdLogin(1)">使用QQ登录</a>
                    </div>
                    <div class="btn-box field-other-wb-btn">
                        <a @click="touchThirdLogin(2)">使用微博登录</a>
                    </div>
                    <div class="n-login-tip">未注册过的手机号，我们将自动帮你注册账号 登录或完成注册代表你同意<a class="user-xy"
                            href="/about/useragreement" target="_blank">用户协议</a></div>
                </div>
            </template>
            <template v-else-if="loginType == 2">
                <div class="n-forget-m-tit">忘记密码</div>
                <div class="n-forget-m-sub-tit">想起密码?<a class="gt-login" @click="loginType = 0">马上登录</a></div>
                <div class="n-login-form">
                    <div class="field-item">
                        <input type="text" placeholder="请输入手机号码" />
                    </div>
                    <div class="field-item">
                        <input type="text" placeholder="请输入验证码" /><a class="get-code-btn">获取验证码</a>
                    </div>
                    <div class="field-item">
                        <input :type="isViewPwd?'text':'password'" placeholder="密码" />
                        <a class="view-pwd" :class="{'active':!isViewPwd}" @click="isViewPwd=!isViewPwd"></a>
                    </div>
                    <div class="field-item">
                        <input :type="isViewPwd?'text':'password'" placeholder="确认密码" />
                        <a class="view-pwd" :class="{'active':!isViewPwd}" @click="isViewPwd=!isViewPwd"></a>
                    </div>
                    <div class="btn-box field-reset-btn">
                        <a>重置密码</a>
                    </div>
                </div>
            </template>
        </div>
    </form>
    <!-- </a-modal> -->
</template>

<script>
import api from '@/api/api'
export default {
    data() {
        return {
            logoPic:'',
            isViewPwd:false,
            authText:'获取验证码',
            countdown:60,
            isSend: false,
            visible: false,
            show: false,
            loginType: 0,
            loginParam: {
                phone: '',
                pwd: ''
            }
        }
    },
    props:['tab'],
    methods: {
        async loginRequest() {
            let that = this
            let type = localStorage.getItem('type')
            if (that.code.length <= 0) {
                return
            }
            if (type.length <= 0) {
                return
            }
            let param = {}
            param["code"] = that.code
            param["type"] = type

            let res = await api.thirdLogin(param);
            if (res.code == 0) {
                this.$amessage.success('登录成功，欢迎回来～');
                let member = res.data.member;
                localStorage.setItem('BSIC', encodeURIComponent(JSON.stringify(member)));
                window.localStorage.setItem('token', res.data.token);
                window.localStorage.setItem('userId', res.data.userId);
                setTimeout(function () {
                    location.reload();
                }, 1200)
            }
        },
        thirdAutoLogin(_code, _state) {
            this.code = _code;
            this.state = _state;

            if (_code) {
                this.loginRequest();
            }
        },
        touchThirdLogin: function (index) {
            let getUrl = encodeURIComponent(this.$webdomainurl+'/#/')
            localStorage.setItem('CRU-PATH',this.$route.fullPath);
            if (index == 0) {
                //微信
                // var auth_url = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wx797de16278f37e82&secret=APPSECRET';
                var auth_url = 'https://open.weixin.qq.com/connect/qrconnect?appid=wx797de16278f37e82&redirect_uri=' + getUrl + '&response_type=code&scope=snsapi_login&state=game_wx#wechat_redirect'
                window.location.replace(auth_url);
                localStorage.setItem('type', 'weixin')
            } else if (index == 1) {
                //qq
                var auth_url = 'https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=101911972&redirect_uri=http://www.gameui.net/index.html&scope=get_user_info&state=game_qq'
                window.location.replace(auth_url);
                localStorage.setItem('type', 'qq')
            } else if (index == 2) {
                //微博
                var auth_url = 'https://api.weibo.com/oauth2/authorize?client_id=2827345101&response_type=code&redirect_uri=' + getUrl + '&state=game_weibo';
                // auth_url='https://api.weibo.com/oauth2/authorize?client_id=2827345101&response_type=code&redirect_uri=' + getUrl

                window.location.replace(auth_url);
                localStorage.setItem('type', 'weibo')
            }
        },
        async getCode() {
            if (this.isSend) {
                this.$amessage.warn('请勿频繁发送!');
                return;
            }
            let that = this;

            let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
            if (!reg.test(that.loginParam.phone)) {
                this.$amessage.warn('手机号码不正确!');
                return
            }

            let result = await api.sendSms({ phone: this.loginParam.phone, type: 2 })
            if (result.code == 0) {
                that.isSend = true;
                this.$amessage.success('验证码已发送到您的手机上，请注意查收!');
                that.loginParam.code = result.data;

                that.settime()
            }
        },
        settime: function () {
            let that = this
            if (that.countdown == 0) {
                that.authText = "免费获取验证码";
                that.countdown = 60;
                that.isSend = false;
                return;
            } else {
                that.authText = "重新发送(" + that.countdown + ")";
                that.countdown--;
            }
            setTimeout(function () {
                that.settime()
            }, 1000)
        },
        async handleLogin() {
            let that = this;
            let res = {};
            if (that.loginParam.phone == '') {
                this.$amessage.warn('用户名不能为空!');
                return
            }
            if (this.loginType == 1) {
                if (that.loginParam.pwd == '') {
                    this.$amessage.warn('密码不能为空!');
                    return
                }
                delete that.loginParam.type;
                // res = await api.login(this.loginParam);
            } else {
                that.loginParam.type=2;
                // that.loginParam.pwd=that.loginParam.code;
                delete that.loginParam.code;
                // res = await api.loginByCode(this.loginParam);
            }
            // delete that.loginParam.code;
            res = await api.login(this.loginParam);

            if (res.code == 0) {
                this.$amessage.success('登录成功，欢迎回来～');
                let member = res.data.member;
                localStorage.setItem('BSIC', encodeURIComponent(JSON.stringify(member)));
                window.localStorage.setItem('token', res.data.token);
                window.localStorage.setItem('userId', res.data.userId);
                setTimeout(function () {
                    location.reload();
                }, 1200)
            }
        },
    },
    mounted(){
        let logPic = localStorage.getItem('LOGO-PIC')
        if (logPic) {
            this.logoPic = logPic;
        }
       if(this.tab){
        this.loginType=this.tab;
       }
    }
}
</script>